<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>炫酷的小球</title>
</head>
<body>
<canvas id="canvas" width= "900" height="600" style="border: 1px solid #000;"></canvas>
<script src="js/underScore.js"></script>
<script src="js/colorBall.js"></script>

<script>
    //获取标签
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    //创建空的数组用来存放小球
    var ballArr = [];
    var colorArray = ['red', 'green', 'blue', 'pink', 'yellow', 'orange', 'purple'];

    //开启定时器,使小球运动
    setInterval(function () {
        //清屏
        ctx.clearRect(0,0, canvas.width, canvas.height);
        for(var i = 0;i < ballArr.length;i ++) {
            ballArr[i].update();
        }
        for(var i = 0;i < ballArr.length;i ++) {
            ballArr[i].render(ctx);
        }
    }, 50);
    //监听鼠标移动创建小球
    canvas.onmousemove = function (e) {
        new colorBall({x:e.offsetX, y:e.offsetY, fill:colorArray[_.random(0, colorArray.length - 1)]});
    }
</script>
</body>
</html>